<template>
  <div class="rechargeBox">
    <main class="mainBox list">
      <div
        v-for="(item, index) in relationDtoList"
        :key="index"
        :class="['item', getTheme(item)]"
      >
        <template v-if="getThemeTemplate(item.theme) === 1">
          <div class="header">
            <div :class="['one', !item.primaryBadage && 'hide']">
              {{ item.primaryBadage }}
            </div>
            <div :class="['two', !item.secondaryBadge && 'hide']">
              {{ item.secondaryBadge }}
            </div>
          </div>

          <div class="body">
            <div class="total">
              <span> ¥ </span>{{ (item?.total / 100).toFixed(2) }}
            </div>
            <div v-if="item.guidance && item.itemClass !== 3" class="guidance">
              {{ item.guidance }}
            </div>
          </div>

          <div class="footer">
            <div class="desc" v-if="item.itemClass === 1">
              获{{ item.itemData }}币
              <template v-if="item.item1Data">
                <span class="give">送 </span>{{ item.item1Data }}赠币
              </template>
            </div>
            <div class="desc" v-if="item.itemClass === 2">获解锁全集</div>
            <div class="desc" v-if="item.itemClass === 3">
              <div>{{ item.guidance }}</div>
            </div>
          </div>
        </template>

        <!-- 浅白色模板 -->
        <lightTemplate
          v-else-if="getThemeTemplate(item.theme) === 2"
          ref="lightRef"
          :item="item"
        />

        <!-- 灰色模板 -->
        <greyTemplate
          v-else-if="getThemeTemplate(item.theme) === 3"
          :item="item"
          ref="greyRef"
        />

        <!-- 选中状态 -->
        <img
          v-show="item.isSelected"
          class="selected"
          src="https://theater-static-1320245876.cos.ap-guangzhou.myqcloud.com/static/pay/icon_hand.png"
          alt=""
        />

        <!-- hover 显示修改、删除 -->
        <div class="hover_box" :class="[!isHover ? 'is_hidden' : '']">
          <span class="edit" @click="handleEdit(item, index)">修改</span>
          <span class="delete" @click="handleDelete(item, index)">删除</span>
        </div>
      </div>
      <!-- 超过6个不显示添加 -->
      <div
        class="addTemplate_box"
        v-if="relationDtoList && relationDtoList.length < 6 && isHover"
        @click="addTemplate"
      >
        <el-icon>
          <Plus />
        </el-icon>
      </div>
    </main>

    <!-- 充值档位 -->
    <rechargeGear
      ref="rechargeGearRef"
      @success="successData"
      v-bind="$attrs"
    />
  </div>
</template>

<script lang="ts" setup>
import rechargeGear from "./rechargeGear.vue";
import lightTemplate from "./lightTemplate.vue";
import greyTemplate from "./greyTemplate.vue";
import { ref, reactive, toRefs } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { cloneDeep } from "lodash-es";

const props = defineProps({
  relationData: {
    type: Array,
    default: () => [],
  },
  // 是否隐藏操作
  isHover: {
    type: Boolean,
    default: () => true,
  },
});

const { isHover, relationData } = toRefs(props);
const handleIndex = ref<number>(0);

const themeConfig: any = {
  1: "grey_theme",
  2: "orange_theme",
  3: "black_theme",
  4: "plain_theme",
  5: "silvery_theme",
  6: "lightYellow_theme",
  7: "orangeYellow_theme",
};

const getTheme = (item: Record<string, any>) => {
  return item.theme in themeConfig ? themeConfig[item.theme] : themeConfig[1];
};

// 样式主题 str 对应值为 themeConfig 对象
const getThemeTemplate = (str: string) => {
  // console.log("str---theme----", str);

  let tempType; // 为1：默认模板   2： 浅色模板   3：深色模板
  if (str == "1" || str == "2" || str == "3") {
    tempType = 1;
  } else if (str == "4" || str == "5" || str == "6") {
    tempType = 2;
  } else if (str == "7") {
    tempType = 3;
  }
  // console.log("tempType-----", tempType);

  return tempType;
};

// 数据处理
const tempData = computed(() => {
  // console.log("接收的数据处理relationData-----", relationData.value);
  // 防止数据污染
  let flag = cloneDeep(relationData.value);
  let temp = flag.map((item: any) => {
    let type = item.itemClass;
    item.item1Class = type;

    //ItemClass 为 1，则表示金币数量 如果 ItemClass 为 2，则表示短剧 Id, 如果 ItemClass 为 3 则表示 VIP 天数
    // 充值模板管理这里是没有选剧功能的，所以短剧 id 传 0
    item.itemData = type === 2 ? 0 : Number(item.itemData);
    item.item1Data = type === 1 ? Number(item.item1Data) : 0;
    let temp = item.item1Data ? `+${item.item1Data}币` : "";
    let totalCoin = `获${item.itemData}币${temp}`;
    item.description =
      type === 3
        ? `${item.itemData}天至尊大会员`
        : type === 2
        ? "解锁全集"
        : totalCoin;
    return item;
  });
  return temp;
});

// 模板数据
const relationDtoList = ref<Array<any>>(tempData.value);
// console.log("relationDtoList---", relationDtoList.value);

const rechargeGearRef = ref(); // 充值档位组件ref
// 编辑
const handleEdit = (val: Record<string, any>, index: number) => {
  // console.log("val编辑模板数据---", val);
  handleIndex.value = index;
  val.type = true;
  rechargeGearRef.value.showDialog(cloneDeep(val));
};

// 删除
const handleDelete = (val: Record<string, any>, index: number) => {
  relationDtoList.value.splice(index, 1);
};

// 添加 / 编辑 值传回
const successData = (val: Record<string, any>) => {
  // console.log("值回传给列表----", val);
  let tempVal = JSON.parse(JSON.stringify(val));
  // 判断是否勾选默认选中  如勾选了则其他选项取消选中
  if (tempVal.isSelected) {
    let temp = cloneDeep(relationDtoList.value);
    relationDtoList.value = temp.map((item: Record<string, any>) => {
      item.isSelected = false;
      return item;
    });
  }
  if (tempVal?.type) {
    // 编辑
    relationDtoList.value.splice(handleIndex.value, 1, tempVal);
  } else {
    // 添加
    relationDtoList.value.push(tempVal);
  }
  // console.log("relationDtoList----", relationDtoList);
};

// 添加
const addTemplate = () => {
  const form = {
    description: "",
    total: 0,
    itemClass: 1, // 充值类型：1 - 金币，2 - 解锁全集，3 - VIP
    itemData: 0, // 充值类型对应值 如果 ItemClass 为 1，则表示金币数量 如果 ItemClass 为 2，则表示短剧 Id, 如果 ItemClass 为 3 则表示 VIP 天数
    item1Class: 1,
    item1Data: 0,
    isSelected: false,
    theme: "",
    primaryBadage: "",
    secondaryBadge: "",
    // badge: "",
    guidance: "",
    bgImage: "1.jpg",
    effect: "2.jpg",
    type: false, // false: 添加  true：编辑
  };
  rechargeGearRef.value.showDialog(form);
};

defineExpose({
  relationDtoList,
});
</script>

<style scoped lang="scss">
@import "./css/theme";

.rechargeBox {
  .mainBox {
    width: 420px;

    .item {
      .hover_box {
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: transparent;
        border-radius: 8px;
        transition: background-color 0.5s;

        span {
          display: flex;
          justify-content: center;
          width: 100px;
          padding: 5px 20px;
          margin-bottom: 15px;
          font-size: 14px;
          line-height: normal;
          background: #fff;
          border-radius: 4px;
        }

        span:last-child {
          margin-bottom: unset;
        }

        span:hover {
          cursor: pointer;
        }

        .edit {
          color: #606266;
          border: 1px solid #dcdfe6;
          border-color: #dcdfe6;
        }

        .edit:hover {
          color: #1890ff;
          background-color: #e8f4ff;
          border-color: #badeff;
        }

        .delete {
          color: #ff4949;
          background: #ffeded;
          border-color: #ffb6b6;
        }

        .delete:hover {
          color: #fff;
          background: #ff4949;
          border-color: #ff4949;
        }
      }
    }

    .item:hover {
      .hover_box {
        z-index: 99;
        display: flex;
        background-color: rgb(0 0 0 / 80%);
      }
    }

    .is_hidden {
      display: none !important;
    }

    .addTemplate_box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 197px;
      height: 110px;
      margin-right: 12px;
      margin-bottom: 20px;
      font-size: 26px;
      color: #999;
      background: #fff;
      border: 1px solid #dcdfe6;
      border-color: #999;
      border-radius: 10px;
    }

    .addTemplate_box:hover {
      cursor: pointer;
      background-color: #e8f4ff;
    }
  }
}
</style>
